import React, { useState } from "react";
// https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
const Item = (props) => {
  return (
    <div className="form-group">
      <label className="col-xs-4 control-label">{props.name}</label>
      <div className="col-xs-8">
        <input type="text" className="form-control" />
      </div>
    </div>
  );
};
const KeyDiff = () => {
  const [list, setList] = useState([
    { name: "Foo1444610101010", id: 1444610101010 },
    { name: "Bar1444600000000", id: 1444600000000 },
  ]);
  return (
    <div style={{ paddingLeft: 300 }}>
      <button
        onClick={() => {
          const id = +new Date();
          setList((l) => [{ name: "Baz" + id, id }, ...l]);
        }}
      >
        Add
      </button>
      { `   `}
      <button
        onClick={() => {
          const firstItems = Array.from(
            document.querySelectorAll(".form-group:first-child input")
          );
          firstItems.forEach(
            (item) => (item.value = "It is " + new Date().toTimeString())
          );
        }}
      >
        set Date
      </button>
      <h3>
        <code>key=index</code>
      </h3>
      <form className="form-horizontal">
        {list.map((todo, index) => (
          <Item {...todo} key={index} />
        ))}
      </form>
      <h3>
        <code>key=id</code>
      </h3>
      <form className="form-horizontal">
        {list.map((todo) => (
          <Item {...todo} key={todo.id} />
        ))}
      </form>
    </div>
  );
};
export default KeyDiff;
